<template>
    <div class="home">
        <!-- 个人信息 -->
        <nav class="header">
            <van-image :src="bg" class="bgImg"  />
            <div class="employeeInfo">
                <div class="userinfo">
                    <h3>{{userInfo && userInfo.name}} {{userInfo && userInfo.staffNo}}</h3>
                    <van-button class="exit" round type="primary" plain size="small" @click="$store.commit('user/exit')">退出</van-button>
                </div>
                <div class="helpBox">
                    <div>
                        <van-image :src="address" class="addressImg"/>
                        <h5>清研精准-{{userInfo && userInfo.cellphone}}</h5>
                    </div>
                    <van-button class="help" icon="phone" round type="primary" plain size="small" color="#5E2F88">技术支持</van-button>
                </div>
            </div>
            <!-- 数据展示 -->
            <ul class="menu">
                <li>
                    <div>{{state.today}}</div>
                    <div>今日订单</div>
                </li>
                <li>
                    <div><span>￥</span>{{state.todayMarket}}</div>
                    <div>今日销售</div>
                </li>
                <li>
                    <div>{{state.yesterday}}</div>
                    <div>昨日订单</div>
                </li>
                <li>
                    <div><span>￥</span>{{state.yesterdayMarket}}</div>
                    <div>昨日销售</div>
                </li>
            </ul>
        </nav>
        <!-- 菜单grid -->
        <section>
            <div class="gridItem">
                <h3>接车开单</h3>
                <van-grid :clickable="true" icon-size="25" :border="false">
                    <van-grid-item icon="chat-o" text="注册会员"  to="/register">
                        <van-image :src="zchy" class="iconImg"/>
                        <span>注册会员</span>
                    </van-grid-item>
                    <van-grid-item icon="photo-o" text="店内车辆" to="" @click="tips()">
                        <van-image :src="dncl" class="iconImg"/>
                        <span>店内车辆</span>
                    </van-grid-item>
                    <van-grid-item icon="photo-o" text="车辆检测" to="/testing">
                        <van-image :src="cljc" class="iconImg"/>
                        <span>车辆检测</span>
                    </van-grid-item>
                    <van-grid-item icon="photo-o" text="现采入库" to="/parts">
                        <van-image :src="xcrk" class="iconImg"/>
                        <span>现采入库</span>
                    </van-grid-item>
                    <van-grid-item icon="photo-o" text="施工列表" to="/repair/list">
                        <van-image :src="sglb" class="iconImg"/>
                        <span>施工列表</span>
                    </van-grid-item>
                </van-grid>
            </div>
            <div class="gridItem">
                <h3>快捷收款</h3>
                <van-grid :clickable="true"  icon-size="25" :border="false">
                    <van-grid-item icon="photo-o" text="零售收款" to="/goods">
                        <van-image :src="lssk" class="iconImg"/>
                        <span>零售收款</span>
                    </van-grid-item>
                    <van-grid-item icon="photo-o" text="套餐卡收款" to="/goods/combo">
                        <van-image :src="tcksk" class="iconImg"/>
                        <span>套餐卡收款</span>
                    </van-grid-item>
                    <van-grid-item icon="photo-o" text="快速核销" to="/order/writeOff">
                        <van-image :src="kshx" class="iconImg"/>
                        <span>快速核销</span>
                    </van-grid-item>
                </van-grid>
            </div>
            <div class="gridItem">
                <h3>查询与预约</h3>
                <van-grid :clickable="true" icon-size="25" :border="false">
                    <van-grid-item icon="photo-o" text="客户查询" to="/customer">
                        <van-image :src="khcx" class="iconImg"/>
                        <span>客户查询</span>
                    </van-grid-item>
                    <van-grid-item icon="photo-o" text="预约记录" to="/order/reserve">
                        <van-image :src="yyjl" class="iconImg"/>
                        <span>预约记录</span>
                    </van-grid-item>
                </van-grid>
            </div>
            <div class="gridItem">
                <h3>个人园地</h3>
                <van-grid :clickable="true" icon-size="25" :border="false">
                    <van-grid-item icon="photo-o" text="我的销售单" to="sales">
                        <van-image :src="woxsd" class="iconImg"/>
                        <span>我的销售单</span>
                    </van-grid-item>
                </van-grid>
            </div>
        </section>
        <!-- <div class="bar"></div> -->
    </div>
</template>
<script setup>
import { computed, onMounted, reactive } from "@vue/runtime-core";
import { useStore } from "vuex";
import {statistics} from 'api/order.js'
import bg from 'assets/bg.png';
import address from 'assets/address.png';
import zchy from 'assets/zchy.png';
import dncl from 'assets/dncl.png';
import cljc from 'assets/cljc.png';
import xcrk from 'assets/xcrk.png';
import sglb from 'assets/sglb.png';
import lssk from 'assets/lssk.png';
import tcksk from 'assets/tcksk.png';
import kshx from 'assets/kshx.png';
import khcx from 'assets/khcx.png';
import yyjl from 'assets/yyjl.png';
import woxsd from 'assets/woxsd.png';
import { Toast } from "vant";
import { employeesList } from '../api/employee.js'
const store = useStore()
let state = reactive({
    yesterday:0,todayMarket:0,today:0,yesterdayMarket:0
})
const userInfo = computed(()=>store.getters['user/users'])
onMounted(async()=>{
    let res = await statistics();
    // console.log(res);
    if(res.data?.length){
        state.yesterday=res.data[0].yesterday;
        state.todayMarket=res.data[0].todayMarket;
        state.today=res.data[0].today;
        state.yesterdayMarket=res.data[0].yesterdayMarket;
    }
    console.log('进入首页');
    let res2 = await employeesList({remarkFou:1});
    localStorage.setItem('employeeList',JSON.stringify(res2.data.allStaff));
})
const tips=()=>{
    Toast.fail('正在建设中…')
}
</script>
<style lang="scss" scoped>
    .home{
        display: flex;
        flex-direction: column;
        nav{
            width: 100%;
            height: 15.3125rem /* 245/16 */;
            box-sizing: border-box;
            position: relative;
            .bgImg{
                position: absolute;
                top:0;
                left:0;
                width:100%;
                height: 85%;
            }
            .employeeInfo{
                position: absolute;
                top:0;
                left:0;
                width:91%;
                height: 12.5rem;
                padding: .9375rem /* 15/16 */;
                overflow: hidden;
                .userinfo{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top:1.875rem /* 30/16 */;
                    h3{
                        font-size: 1.125rem /* 18/16 */;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #FFFFFF;
                        margin:0;
                    }
                    .exit{
                        font-size: .9375rem /* 15/16 */;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        background: transparent;
                        border:none;
                    }
                }
                
                .helpBox{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .addressImg{
                        width:1.25rem /* 20/16 */;
                        height:1.25rem /* 20/16 */;
                        display: inline-block;
                        vertical-align: sub;
                    }
                    h5{
                        display: inline-block;
                        font-size: .9375rem /* 15/16 */;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #FFFFFF;
                        margin-left:.625rem /* 10/16 */;
                    }
                    .help{
                        width: 6.5625rem /* 105/16 */;
                        height:1.5625rem /* 25/16 */;
                        background: #FFFFFF;
                        border-radius: .8125rem /* 13/16 */;
                        border:none;
                    }
                }
            }
            .menu{
                position: absolute;
                top: 9.375rem /* 150/16 */;
                left: 1.25rem /* 20/16 */;
                width: 90%;
                height: 3.125rem /* 50/16 */;
                background: #FFFFFF;
                box-shadow: 0px 5px 15px 0px rgba(32, 36, 54, 0.05);
                border-radius: .625rem /* 10/16 */;
                display: flex;
                justify-content: space-around;
                margin:auto;
                padding: 1.25rem /* 20/16 */  0;
                li{
                    font-size: .875rem /* 14/16 */;
                    font-family: DINCond-Bold;
                    font-weight: 400;
                    color: #000000;
                    div:nth-of-type(1){
                        font-weight: 500;
                        font-size: 1.25rem /* 20/16 */;
                        span{
                            font-size: 1rem /* 16/16 */;
                            vertical-align: bottom;
                            font-weight: 400;
                        }
                    }
                    div:nth-of-type(2){
                        margin-top:.625rem /* 10/16 */;
                    }
                }
            }
        }
        section{
            .gridItem{
                .iconImg{
                    width:2.8125rem /* 45/16 */;
                    height: 2.8125rem /* 45/16 */;
                    border:1px dashed #5E2F88;
                    display: inline-block;
                    margin-bottom:.625rem /* 10/16 */;
                }
                span{
                    font-size: .875rem /* 14/16 */;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #000000;
                }
            }
            h3{
                text-align: left;
                text-indent: .9375rem /* 15/16 */;
                font-size: 1rem /* 16/16 */;
                margin: .266667rem /* 20/75 */ 0
            }
        }
        // --van-grid-item-icon-size:.666667rem /* 50/75 */;
        // --van-grid-item-text-font-size:.373333rem /* 28/75 */;
    }
    .bar{
        width: 8.375rem /* 134/16 */;
        height: .3125rem /* 5/16 */;
        background: #101D34;
        border-radius: .15625rem /* 2.5/16 */;
        margin: 0 auto .5rem /* 8/16 */;
    }
</style>